<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ page import="java.util.*" %>
<%@ page import="com.hu.example.Constants" %>
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/reset.css" type="text/css" />
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/common.css" type="text/css" />
    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
    <!--font-awesome 核心我CSS 文件-->
    <link href="//cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 在bootstrap.min.js 之前引入 -->
    <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
    <!-- Bootstrap 核心 JavaScript 文件 -->
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <style type="text/css">
      .form{background: rgba(255,255,255,0.2);width:400px;margin:100px auto;}
      #login_form{display: block;}
      #register_form{display: none;}
      .fa{display: inline-block;top: 27px;left: 6px;position: relative;color: #ccc;}
      input[type="text"],input[type="password"]{padding-left:26px;}
      .checkbox{padding-left:21px;}
    </style>
    <script>
      function login() {
          var sub = true;
          var loginFormObj = document.getElementById("loginForm");
          var userNameValue = document.getElementById("userName").value;
          if (!userNameValue) {
              document.getElementById("userErrorIcon").style.visibility = "visible";
              sub = false;
          } else {
              document.getElementById("userErrorIcon").style.visibility = "hidden";
          }
      
          var passwordValue = document.getElementById("password").value;
          if (!passwordValue) {
              document.getElementById("passErrorIcon").style.visibility = "visible";
              sub = false;
          } else {
              document.getElementById("passErrorIcon").style.visibility = "hidden";
          }
      
          if (sub){
              loginFormObj.submit();
          }
      };
    
      document.onkeydown=function(event){
          var e = event || window.event || arguments.callee.caller.arguments[0];
          if(e && e.keyCode==13){ // enter 键
              login();
          }
      }; 
    </script>
  </head>
  <body>
  <div id="warpper">
    <div class="form row">
      <form method="POST" action="login.action" class="form-horizontal col-sm-offset-3 col-md-offset-3" id="loginForm">
        <h3 class="form-title">登录你的账号</h3>
        <div class="col-sm-9 col-md-9">
          <div class="form-group">
            <i class="fa fa-user fa-lg"></i>
            <input id="userName" class="form-control required" type="text" placeholder="账号" name="userName" autofocus="autofocus" maxlength="20"/>
          </div>
          <div class="form-group">
            <i class="fa fa-lock fa-lg"></i>
            <input id="password" class="form-control required" type="password" placeholder="密码" name="password" maxlength="8"/>
          </div>
          <div class="form-group">
            <label class="checkbox">
              <input type="checkbox" name="remember" value="1"/> 记住我
            </label>
            <%String tip = (String)session.getAttribute(Constants.TIP_MESSAGE);
              String visibility = "hidden";
              if (null != tip && !"".equals(tip)) {
                visibility = "visible";
              }
            %>
            <h5 class="form-title" style="visibility: <%=visibility %>;text-align:center;color:red">
              <%=tip %>
            </h5>
            <hr />
            <a href="javascript:;" id="register_btn" class="">新建账号</a>
          </div>
          <div class="form-group">
            <input type="submit" class="btn btn-success pull-right" onclick="login()" value="登录 "/>
          </div>
        </div>
      </form>
  </div>
  </body>
</html>
<script>
var queryString = location.hash;
document.getElementById("queryString").value = queryString;
</script>